<template>
    <div>
    <el-menu
        router
        default-active="2"
        class="el-menu-vertical-demo"
        text-color="#fff" 
        background-color="rgb(48, 65, 86)"
        :collapse="isCollapse"
        popper-effect="light"
        >
        <el-menu-item class="home" index="/home">
            <el-icon>
            <Menu />
            </el-icon>
            <template #title>首页</template>
        </el-menu-item>
        <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <Avatar />
                </el-icon>
                <span>访客管理</span>
            </template>
            <el-menu-item index="/table/drag-table">访客管理</el-menu-item>
            <el-menu-item index="/example/list">核销人员管理</el-menu-item>
            <el-menu-item  index="/components-demo/tinymce">校园动态管理</el-menu-item>
            <el-menu-item  index="/excel/export-excel">审核日志</el-menu-item>
            <el-menu-item  index="/example/journal">核销日志</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>
            <el-icon>
                <Rank />
            </el-icon>
            <span>行程管理</span>
            </template>
            <el-menu-item  index="/trajectory/trajectorylist">轨迹管理</el-menu-item>
            <el-menu-item index="/address/addresslist">点位管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
        <template #title>
          <el-icon>
            <Postcard />
          </el-icon>
          <span>权限管理</span>
        </template>
        <el-menu-item  index="/role/role-list">角色管理</el-menu-item>
        <el-menu-item   index="/admin/list">管理员管理
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
            <el-icon><Setting /></el-icon>
          <span>设置</span>
        </template>
        <el-menu-item  index="/settings/settings">系统设置
        </el-menu-item>
        <el-menu-item  index="/charts/keyboard">部门设置
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    </div>
</template>

<script setup lang="ts">
    import { defineProps } from 'vue'
    const props = defineProps(['isCollapse'])
</script>

<style scoped>

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 210px;
        min-height: 100%;
        height: 100%;
    }
    .el-menu-vertical-demo:not(.el-menu--expand){
        height: 100%;
    }
    .home{
        background-color: rgb(48, 65, 86) !important;
    }
    .home:hover{
        background-color: #001528 !important;
    }
    .el-menu-item{
        background-color: #1f2d3d ;
    }
    .el-menu-item:hover{
        width: 210px;
        background-color: #001528 ;
    }
</style>